<template>
  <div>
    <header>
      <!-- 搜索 -->
      <el-input
        class="seachInput"
        placeholder="请输入内容"
        v-model="input"
        clearable
      >
      </el-input>
      <el-button
        @click="handleSeach()"
        class="seachBtn"
        type="primary"
        icon="el-icon-search"
        >搜索</el-button
      >
      <!-- 添加 -->
      <el-button type="primary" @click="createBtn()">添加成员</el-button>
      <Create ref="CreateComp" @handleCreate="handleCreate" />
    </header>
    <!-- 渲染数据 -->
    <el-table
      class="table"
      :data="pageData"
      style="width: 100%; margin-bottom: 20px; margin: 0 auto"
      v-loading="loading"
    >
      <el-table-column prop="name" label="姓名" align="center">
      </el-table-column>
      <el-table-column
        prop="sex"
        label="性别"
        min-width="100"
        :formatter="formatterSex"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="status"
        label="在线状态"
        min-width:100px
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.status ? "开启" : "关闭" }}
          <!-- switch 组件 -->
          <!-- <el-switch
            v-model="scope.row.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch> -->
        </template>
      </el-table-column>
      <el-table-column prop="rule" label="职位" min-width:100px align="center">
      </el-table-column>
      <!-- 操作 -->
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="editBtn(scope.row)">编辑</el-button>

          <el-popconfirm
            confirm-button-text="好的"
            cancel-button-text="不用了"
            icon="el-icon-info"
            icon-color="red"
            title="这是一段内容确定删除吗？"
            @confirm="handleDelete(scope.$index, scope.row)"
          >
            <el-button size="mini" type="danger" slot="reference"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <Edit ref="editComp" @handleEdit="handleEdit" />
    <!-- 分页 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size.sync="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="handleSeach().length ?? this.data.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import Create from "./Create.vue";
import Edit from "./Edit.vue";
import { ajax } from "@/mock/ajax";
import { data } from "@/mock/mockData";

ajax.initTable(data);

export default {
  name: "GetData",
  components: {
    Create,
    Edit,
  },
  data() {
    return {
      data: [],
      // 搜索框
      input: "",
      // loading
      loading: true,
      //添加
      dialogFormVisible: false,
      //分页
      pageData: [],
      currentPage: 1,
      val: 1,
      pageSize: 5,
    };
  },
  computed: {},
  created() {
    this.updata();
  },
  mounted() {},
  methods: {
    formatterSex(row, column, cellValue) {
      return cellValue === 0 ? "男" : "女";
    },
    //添加
    createBtn() {
      this.$refs.CreateComp.dialogFormVisible = true;
    },
    handleCreate(createData) {
      ajax
        .append(createData)
        .then((res) => {
          this.updata();
          console.log("append", res);
        })
        .finally(() => {
          this.$refs.CreateComp.loading = false;
          this.$refs.CreateComp.dialogFormVisible = false;
        });
    },
    //编辑
    editBtn(row) {
      this.updata();
      this.$refs.editComp.dialogFormVisible = true;
      //将点击的信息传给edit中的form
      this.$refs.editComp.form = row;
    },
    handleEdit(editData) {
      ajax
        .set(editData.id, editData)
        .then(() => {
          this.updata();
        })
        .finally(() => {
          this.$refs.editComp.loading = false;
          this.$refs.editComp.dialogFormVisible = false;
        });
    },
    //删除
    handleDelete(index, row) {
      ajax.delete(row.id).then((res) => {
        console.log("delete - success", res);
        this.$message.success(`删除${row.name}成功！`);
        this.updata();
      });
    },
    //搜索
    handleSeach() {
      return this.data.filter((item) => {
        return `${item.name}`.includes(this.input);
      });
    },
    //分页
    handleSizeChange(value) {
      this.pageSize = value;
      this.handleCurrentChange(this.val);
      console.log(`每页 ${value} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.res = this.handleSeach() ?? this.data;
      this.pageData = this.res.slice(
        (val - 1) * this.pageSize,
        val * this.pageSize
      );
    },

    //更新数据
    updata() {
      this.loading = true;
      ajax
        .getAll()
        .then((res) => {
          this.data = res;
          this.handleCurrentChange(this.val); //初始渲染时，显示分页   ->   为什么要写在这？？？
          // console.log(res);
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>

<style scoped lang="scss">
header {
  display: flex;
  justify-content: space-between;
  width: 400px;
  margin-left: 100px;
  padding: 20px;
  :deep .el-input__inner {
    border-radius: 4px 0 0 4px;
  }
  .seachBtn {
    background: rgb(212, 216, 218);
    border: none;
    border-radius: 0 4px 4px 0;
  }
}
</style>
